<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 200px;
            margin: 100px auto;
        }
        .header{
            height: 30px;
            display: flex;
            /* header里面的两个span左右对称 */
            justify-content: space-between;
        }
        textarea{
            width: 100%;
            height: 50px;
            /* 留言框不能拉动 */
            resize: none;
        }
        button{
            width: 60px;
            height: 40px;
            float: right;
            margin:0px 5px;
        }
    </style>
</head>

<body>
    <!-- 模板 -->
    <div id="app">
         <!-- 容器 -->
         <div class="box">
              <div class="header">
                   <span>有什么新鲜事情告诉大家</span>
                   <span ref="cur">还可以输入{{140 - msg.length < 0 ? 0 :140 - msg.length }}文字</span>
              </div>
              <textarea v-model="msg"></textarea>
              <div>
                  <button :disabled="msg.length==0 || msg.length>140" @click="handler">发布</button>
                  <button @click="clear" :disabled="msg.length==0">清除</button>
              </div>
         </div>
    </div>
</body>

</html>
<script>
    //创建VM实例
    //Vue框架以后，满脑子数据、业务，不要在想DOM
    let VM = new Vue({
         //容器进行关联
         el:'#app',
         data:{
             msg:''
         },
         methods: {
            //清除的回调
            clear(){
                this.msg = '';
            }
            ,
            //发布的回调
            handler(){
             //获取span真实节点
             //可以操作DOM
             this.$refs.cur.style.color="pink";
            }
         },
    });
    //Vue当中也有ref，学习react的时候，ref有三种写法
    //Vue框架当中的ref只有一种写法：字符串
    //第一步：在想获取节点的标签身上绑定ref属性
    //第二步：通过VM.$refs.属性值获取，获取真实的DOM节点
    //注意：如果ref重名后者覆盖前者
</script>